import React from 'react';
import './collect.scss';
import { getCollectionList } from 'api/user.js';
import CommodityCard from './commodityCollect/commodityCard.jsx';
import ShopCard from './shopCollect/shopCard.jsx';
import LazyLoad from 'react-lazyload';
class Collect extends React.Component{
	constructor (props) {
		super(props)
		this.state={
			collectList: ['商品收藏', '店铺收藏'],
			collectNum: 0,
			collList: [],
			currentPage: 0,
      lastPage: 0
		}
	}
	show (index) { //collectList点击切换
		this.setState({
			collectNum: index,
			collList: []
		},() => {
			if(this.state.collectNum === 0){
				this._getCollectionList (1,1)
			} else {
				this._getCollectionList (2,1)
			}
		})
	}
	_getCollectionList (sum,num) { //用户收藏列表接口
		getCollectionList({
			collect_type:sum,
			page: num
		}).then(res => {
			if (res.code === 1){
				this.setState({
					collList: this.state.collList.concat(res.data.data),
					currentPage: num,
          lastPage: res.data.last_page
				})
			} else if(res.code === -403){
				this.props.history.push({
            pathname: '/login'
          })
			}
		})
	}
	goBack () {
    this.props.history.goBack()
  }
	componentDidMount () {
		this._getCollectionList (1,1)
		let that=this;
    let i=1;
    window.onscroll= function(){
      var t = document.documentElement.scrollTop||document.body.scrollTop;
      var b = document.documentElement.scrollHeight||document.body.scrollHeight;
      var h = document.documentElement.clientHeight||document.body.clientHeight;
      if((+t+h) == b && i <= that.state.lastPage && t!==0){
        that._getCollectionList(that.state.collectNum+1,i++)
      }
    }
	}
	render() {
		return (
			<div className='collect'>
				<div className="collect_title">
					<i className="glyphicon glyphicon-back" onClick={this.goBack.bind(this)}></i>
					<span>收藏夹</span>
				</div>
				<div className="collect_card">
				{
					this.state.collectList.map((item,index) => {
						return(
							<div className={this.state.collectNum === index && 'active'} onClick={this.show.bind(this,index)} key={index}>{item}</div>
						)
					})
				}
				</div>
				<div className="collect_content">
				{
					this.state.collectNum === 0 ?
					<div>
						{this.state.collList.map((item, index) => {
              return (
                <LazyLoad offsetTop={200} key={index} height={0}>
                  <CommodityCard commodityDetail={{...item}} _getCollectionList={index =>{this.show(index)}}/>
                </LazyLoad>
              )
            })}
					</div>
					:
					<div>
						{this.state.collList.map((item, index) => {
              return (
                <LazyLoad offsetTop={200} key={index} height={0}>
                  <ShopCard shopDetail={{...item}} _getCollectionList={index =>{this.show(index)}}/>
                </LazyLoad>
              )
            })}
					</div>
				}
				</div>
				<div className={this.state.currentPage >= this.state.lastPage ? 'noMore' : 'card_hide'} style={{textAlign: 'center'}}>————  老板，没有更多了！ ————</div>
				<div className="collect_bg"></div>
			</div>
		)
	}
}
export default Collect;
